import React from 'react'
import LocalStorageService from "../../utils/LocalStorageService";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {withRouter} from "react-router-dom";
import PlanCard from "../plan-detail/plan-card/plan-card";
import {cleanPlanData} from "../game-room/components/Main/plan/plan";
import {getMyPlanReq} from "../../apis/goApis";
import {Toast} from "antd-mobile";
import PlanPercents from "../plan-detail/PlanPercents/PlanPercents";
import NoDataPage from "../game/Football/NoDataPage/NoDataPage";

class MyPlan extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.tabs = [
            {title: '未赛',},
            {title: '已赛',},
        ]
        this.state = {
            type: 0,
            list: [],
            p: 0,
            end: false,
        }
    }

    componentDidMount() {
        this.get()

    }

    get = () => {
        getMyPlanReq({
            Uid: this.uid,
            Flag: this.state.type + 1,
            P: this.state.p,
        }).then(resp => {
            const list = resp.data.ok
            let end
            if (list.length === 0) {
                end = true
            } else if (list.length < 10) {
                end = true
            } else {
                end = false
            }
            if (list) {
                this.setState({
                    list: [...this.state.list, ...list,],
                    end,
                })
            }
        })
    }

    onTabClick = (index) => {
        this.setState({
            type: index,
            p: 0,
            list: [],
        }, () => this.get())
    }

    goToPlanDetail = (planData) => {
        let end = `./plan-detail?matchId=${planData.Namiid}&planId=${planData.Id}`
        this.props.history.push(end)
    }

    onScroll = (event) => {
        const ctn = this.scrollContainer
        const top = ctn.scrollTop
        const scrollHei = ctn.scrollHeight
        const ctnHei = ctn.clientHeight
        if (top + ctnHei === scrollHei) {
            if (this.state.end && this.state.list.length > 0) {
                Toast.info('已经没有数据', 0.5)
            } else {
                this.setState({
                    p: this.state.p + 1,
                }, () => this.get())
            }
        }
    }

    render() {
        const list = this.state.list
        const listTemplate = list.length > 0 ? list.map((data, index) => {
            const is打赏 = data.Price === 0
            const borderColor = is打赏 ? '#FFC863' : '#FA7268'
            const tag = <div
                style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    width: 0,
                    height: 0,
                    borderTop: `40px solid ${borderColor}`,
                    borderLeft: '40px solid transparent',
                }}
            />
            const tagText = <span
                style={{
                    color: '#fff',
                    position: 'absolute',
                    top: '4px',
                    right: '6px',
                    fontSize: '12px',
                }}
            >{is打赏 ? '赏' : '购'}</span>
            const template = <div
                key={index}
                className="mg-b-4px"
                style={{position: 'relative', background: '#fff',}}
                onClick={() => this.goToPlanDetail(data)}

            >
                <PlanCard
                    plan={cleanPlanData(data)}
                    game={data}
                    buy={true}
                    fromMyPlan
                />
                {tag}
                {tagText}
                <div style={{padding: '0 16px 16px',}}>
                    <PlanPercents planData={cleanPlanData(data)}/>
                </div>
            </div>
            return data ? template : null
        }) : <NoDataPage />
        return <div
            onScroll={e => this.onScroll(e)}
            style={{
                height: '100vh',
                overflow: 'hidden',
                overflowY: 'scroll',
            }}
            ref={el => this.scrollContainer = el}
        >
            <GoBackLayout
                title='我的方案'
                history={this.props.history}
            >
                <div style={{marginTop: '1px',}}>
                    <TabWithCustomUnderline
                        tabs={this.tabs}
                        tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
                        onTabClick={(e, i) => this.onTabClick(i)}
                    >
                        <div>
                            {listTemplate}
                        </div>

                    </TabWithCustomUnderline>
                </div>

            </GoBackLayout>
        </div>
    }

}


export default withRouter(MyPlan)